<template>
	<coreshop-page title="账号充值" mode="left">
		<view class="layout-recharge-box">
			<view class="card">
				<view class="item">
					<view class="label">当前余额</view>
					<view class="balance">￥{{state.userInfo?.balance}}</view>
				</view>
				<view class="item">
					<view class="label">充值金额</view>
					<view class="balance recharge">￥{{state.rechargeMoney}}</view>
				</view>
				<view class="recharge-box">
					<view class="recharge-tip">请选择您的充值方案:</view>
					<view class="recharge-type">
						<view class="recharge-item" :class="{'recharge-item-activated':item.id===state.rechargeId}"
							v-for="item in state.rechargeList" :key="item.id" @click="onChoosedRecharge(item)">
							{{item.description}}
						</view>
					</view>
				</view>
				<view class="tip">
					<view>充值须知：</view>
					<view>充值金额永不过期；</view>
					<view>充值一经办理,概不退款；</view>
				</view>
			</view>

			<coreshop-fixed-bottom-button :radius="100" title="去支付"
				@onClick="handlePayClick"></coreshop-fixed-bottom-button>
		</view>
	</coreshop-page>
</template>
<script setup lang="ts">
	import { reactive } from 'vue';
	import { handleShowToast, handleRouteNavigateTo } from '@/core/utils';
	import { queryUserInfo, queryTopUpTypeList } from '@/core/api';
	import { onLoad } from '@dcloudio/uni-app';
	import type { Response, UserInfoType } from '@/core/models';
	import { PaymentTypeEnum } from '@/core/enum';

	interface RechargeType {
		defaultMoney : number;
		description : string;
		giftMoney : number;
		giftPoint : number;
		id : number;
		isEnable : boolean;
		sortId : number;
		title : string;
	}

	const state = reactive<{
		rechargeList : Array<RechargeType>;
		rechargeId : number;
		rechargeMoney : number;
		userInfo : UserInfoType;
	}>({
		rechargeList: [],
		rechargeId: 0,
		rechargeMoney: 0,
		userInfo: {},
	})

	onLoad(() => {
		getUserInfo();
		getTopUpTypeList();
	});

	/** 获取用户信息 */
	const getUserInfo = async () => {
		const userInfo : Response<UserInfoType> = await queryUserInfo();
		state.userInfo = userInfo?.data;
	}

	/** 获取充值规则列表 */
	const getTopUpTypeList = async () => {
		const recharge : Response<any> = await queryTopUpTypeList();
		if (recharge.status) {
			state.rechargeList = recharge?.data;
		} else {
			handleShowToast(recharge.msg)
		}
	}

	const onChoosedRecharge = (item : RechargeType) => {
		state.rechargeId = item.id;
		state.rechargeMoney = item.defaultMoney;
	}


	const handlePayClick = () => {
		if (state.rechargeId == 0) {
			handleShowToast('请选择充值金额');
			return;
		}
		handleRouteNavigateTo(`/pages/order/pay/pay?recharge=${state.rechargeId}&orderType=${PaymentTypeEnum.recharge}`);
	}
</script>
<style lang="scss" scoped>
	@import './index.scss';
</style>